<template>
    <div class="table-box">
      <div class="table-search">
        <el-form :inline="true" :model="form">
          <el-form-item label="商户">
            <el-select
              clearable
              v-model="form.merchant_id"
              placeholder="商户"
              filterable
            >
              <el-option
                v-for="item in payMerchantList"
                :key="item.value"
                :label="item.name + '-' + item.merchant_id"
                :value="item.merchant_id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发卡渠道">
            <el-select
              clearable
              v-model="form.issuer_channel"
              placeholder="发卡渠道"
            >
              <el-option
                v-for="item in issueChannelData"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onQuery">查询</el-button>
            <el-button @click="onReset">重置</el-button>
            <el-button type="primary" @click="onAdd">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="card content-box">
        <div class="table">
          <el-table :data="tableData" border v-loading="loading">
            <el-table-column prop="id" label="id" align="center" />
            <el-table-column prop="merchant_id" label="商户id" align="center" width="120" />
            <el-table-column prop="merchant_name" label="商户名称" align="center" width="150" />
            <el-table-column prop="issuer_channel" label="发卡渠道" align="center" />
            <el-table-column prop="card_rate" label="开卡费率" align="center">
              <template #default="scope">{{ scope.row.card_rate }} %</template>
            </el-table-column>
            <el-table-column prop="card_fee" label="开卡费用" align="center" />
            <el-table-column prop="in_rate" label="卡充值费率" align="center">
              <template #default="scope">{{ scope.row.in_rate }} %</template>
            </el-table-column>
            <el-table-column prop="in_fee" label="卡充值费用" align="center" />
            <el-table-column prop="out_rate" label="卡提现费率" align="center">
              <template #default="scope">{{ scope.row.out_rate }} %</template>
            </el-table-column>
            <el-table-column prop="out_fee" label="卡提现费用" align="center" />
            <el-table-column prop="refund_fee_rate" label="卡退款费率" align="center">
              <template #default="scope">{{ scope.row.refund_fee_rate }} %</template>
            </el-table-column>
            <el-table-column prop="refund_fee" label="卡退款费用" align="center" />
            <el-table-column prop="reversal_fee" label="卡撤销费用" align="center" />
            <el-table-column prop="dispute_fee" label="卡争议处理费用" align="center" />
            <el-table-column prop="refuse_fee_rate" label="卡拒付费率" align="center">
              <template #default="scope">{{ scope.row.refuse_fee_rate }} %</template>
            </el-table-column>
            <el-table-column prop="refuse_min_fee" label="卡最低拒付费用" align="center" />
            <el-table-column prop="description" label="备注" align="center">
              <template #default="scope">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="scope.row.description"
                  :disabled="!scope.row.description"
                  placement="top"
                >
                  <span class="ellipsis">{{
                    scope.row.description || "--"
                  }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right">
              <template #default="scope">
                <el-button
                  type="primary"
                  plain
                  @click="handleOperate(scope.$index, scope.row, 'edit')"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="table-pagination">
            <el-pagination
              :current-page="pageable.pageNum"
              :page-size="pageable.pageSize"
              :page-sizes="[10, 25, 50, 100]"
              :background="true"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageable.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </div>
        </div>
      </div>
      <DialogForm
        @cancel="cancel"
        @closeDialog="closeDialog"
        @cardTypeChange="cardTypeChange"
        @submitForm="submit"
        :dialogFormVisible="dialogVisible"
        :dialogForm="dialogForm"
        :btnLoading="btnLoading"
        :issueChannelData="issueChannelData"
      />
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, reactive, computed } from "vue";
  import {
    HaloCardsMerchantFeeConfigApi,
    HaloCardsMerchantFeeConfigUpdateApi,
  } from "@/api/payServerse/cards";
  import DialogForm from "./components/feeForm.vue";
  import { GlobalStore } from "@/store";
  
  const globalStore = GlobalStore();
  const payMerchantList = computed(() => globalStore.payMerchantList);
  
  const loading = ref(false);
  const tableData = ref([]);
  const dialogVisible = ref(false);
  const btnLoading = ref(false);
  const btnType = ref(null);
  const issueChannelData = ref([]);
  const formData = {
    merchant_id: "",
    issuer_channel: "",
  };
  const form = reactive({ ...formData });
  const pageable = reactive({
    pageNum: 1,
    pageSize: 10,
    total: 0,
  });
  const dialogFormData = {
    id: "",
    merchant_id: "",
    issuer_channel: "",
  
    card_rate: 0,
    card_fee: 0,
    in_rate: 0,
    in_fee: 0,
    out_rate: 0,
    out_fee: 0,
    refund_fee_rate: 0,
    refund_fee: 0,
    reversal_fee: 0,
    dispute_fee: 0,
    refuse_fee_rate: 0,
    refuse_min_fee: 0,
  
    cost_card_rate: 0,
    cost_card_fee: 0,
    cost_in_rate: 0,
    cost_in_fee: 0,
    cost_out_rate: 0,
    cost_out_fee: 0,
    cost_refund_fee_rate: 0,
    cost_refund_fee: 0,
    cost_reversal_fee: 0,
    cost_dispute_fee: 0,
    cost_refuse_fee_rate: 0,
    cost_refuse_min_fee: 0,
  
    description: "",
  };
  const dialogForm = reactive({ ...dialogFormData });
  // 参数
  const param = () => {
    return {
      page: pageable.pageNum,
      pagesize: pageable.pageSize,
      merchant_id: form.merchant_id,
      issuer_channel: form.issuer_channel,
    };
  };
  // 获取表格数据
  const getTbaleData = async () => {
    loading.value = true;
  
    try {
      const res = await HaloCardsMerchantFeeConfigApi(param());
      loading.value = false;
      tableData.value = res.data.results;
      pageable.total = res.data.count;
      issueChannelData.value = res.data.extra.issuer_channel;
    } catch (error) {
      loading.value = false;
    }
  };
  // 查询
  const onQuery = () => {
    console.log("onQuery");
    getTbaleData();
  };
  // 重置
  const onReset = () => {
    Object.assign(form, formData);
    getTbaleData();
  };
  // 新增
  const onAdd = async () => {
    dialogVisible.value = true;
    btnType.value = "add";
  };
  //关闭弹窗
  const closeDialog = () => {
    dialogVisible.value = false;
    btnType.value = null;
    Object.assign(dialogForm, dialogFormData);
  };
  
  const cardTypeChange = (val) => {
    if (val) {
      let arr = val.split("-");
      dialogForm.name = arr[0] || "";
      dialogForm.en_name = arr[1] || "";
    }
  };
  
  // 取消
  const cancel = () => {
    dialogVisible.value = false;
    btnType.value = null;
    Object.assign(dialogForm, dialogFormData);
  };
  // 提交
  const submit = async (param) => {
    delete param.src;
    try {
      btnLoading.value = true;
      if (btnType.value == "add") {
        delete param.id;
        const res = await HaloCardsMerchantFeeConfigUpdateApi(param);
        ElMessage({
          message: res.message,
          type: "success",
        });
      }
      if (btnType.value == "edit") {
        //console.log(param);
        const res = await HaloCardsMerchantFeeConfigUpdateApi(param);
        ElMessage({
          message: res.message,
          type: "success",
        });
      }
      dialogVisible.value = false;
      btnLoading.value = false;
      getTbaleData();
    } catch (error) {
      btnLoading.value = false;
    }
  };
  
  const handleOperate = async (index, row, type) => {
    // 编辑
    if (type === "edit") {
      btnType.value = "edit";
      Object.assign(dialogForm, { ...row });
      dialogVisible.value = true;
    }
  };
  // 条数
  const handleSizeChange = (number) => {
    pageable.pageSize = number;
    getTbaleData();
  };
  // 页码
  const handleCurrentChange = (number) => {
    pageable.pageNum = number;
    getTbaleData();
  };
  onMounted(() => {
    getTbaleData();
  });
  </script>
  